<template>
    <div style="height: 100vh;overflow-y: hidden;">
        <Header/>

   
    <div class="playerMain">
        
        <div class="d-flex flex-row flex-wrap" style="width: 100%;">
            <template v-if="episodes.length">
                <div
                    class="d-flex a-center j-center bg-black"
                    :style="{
                        width: windowSize.x * 0.72 + 'px',
                        height: windowSize.y -50 + 'px',
                    }"
                >
                    <d-player
                        class="d-flex dplayer"
                        :options="videoOptions"
                        ref="player"
                        :style="{ height: windowSize.y - 50 + 'px' }"
                    ></d-player>
                </div>
            </template>
            <template v-else>
                <div
                    class="d-flex a-center j-center"
                    :style="{
                        width: windowSize.x * 0.75 + 'px',
                        height: windowSize.y - 50 + 'px',
                    }"
                >
                    <!-- <div class="d-flex text-white">暂无剧集视频</div> -->
                    <div class="d-flex relative centers" >
                        <img src="../assets/img/empty.png" alt="">
                        <span class="diy_tip" >暂无剧集视频</span>
                    </div>
                </div>
            </template>
            <div
                class="d-flex flex-column flex-1 overflowy bg-black3 p-20"
                :style="{ height: windowSize.y - 50 + 'px' }"
            >
                <div class="text-white font-md4 mb-5">剧名：{{ playlet.name }}</div>
                <div class="text-light5 font-sm4 mb-2">
                        {{
                            (playlet.episodes_name ? playlet.episodes_name + ' ' : '') +
                            (playlet.is_finish == 0
                                ? '未完结'
                                : playlet.is_finish == 1
                                ? '已完结'
                                : '')
                        }}
                    </div>
                    <div class="text-light5 font-sm4">更新时间：{{ playlet.updated_at }}</div>
                <div class="play-box d-flex flex-wrap" style="margin-top: 20px;">
                        <div
                            v-for="(item, index) in episodes"
                            :key="index"
                         
                           
                        >  
                            <div  class="play-item" :class="{ 'active-item': curent == index }" v-if="index < showNum"  @click.stop="clickVideo(item, index)" >
                                {{ item.playlet_number }}
                            </div>
                        
                        </div>
                        <div @click.stop="showAll" class="play-item" v-if="showT && episodes.length>10" >
                              .....
                        </div>
                </div>
                <div class="d-flex flex-column mb-20">
                    <div class="text-light5 font-md mb-5" >
                        <div style="color: #fff;font-size: 16px;line-height: 24px;margin: 10px 0;">简介</div>
                        <div v-html="playlet.introduction || ''"></div> 
                         <div style="color: #fff;font-size: 16px;line-height: 24px;margin: 10px 0;">售价</div>
                        <div v-html="playlet.price || ''"></div>
                    </div>
                </div>
               
            </div>
        </div>
    </div>
</div>
</template>

<script>
let that;
import { mapState } from 'vuex';
import VueDPlayer from '@/libs/vue-dplayer';
import { epiList } from '@/api/home';
import Header  from '../components/header.vue';
require('/src/assets/vue-dplayer.css');
export default {
    components: {
        'd-player': VueDPlayer,
        Header
    },
    computed: {
        ...mapState({
            windowSize: state => state.layout.windowSize,
        }),
    },
    data() {
        return {
            showT:true,
            showNum:10,
            visible: false,
            player: '',
            curent: 0,
            episodes: [],
            playlet: {},
            downloadPercentage: 0,
            title: '',
            videoUrl: '',
            videoCover: '',
            videoOptions: {
                video: {
                    url: '', //视频链接
                    pic: '', //封面图
                    thumbnails: '', //缩略图
                },
                theme: '#409eff', //主题色
                screenshot: true, //是否支持截图
                autoplay: true, //是否自动播放
                preload: 'auto', //预加载
            },
        };
    },
    created() {
    },
    mounted() {
        that = this;

        let { id } = this.$route.query;
        console.log('id', id);
        this.getepiList(id);
    },
    methods: {
        showAll(){
            this.showT=false
            this.setNum()
            // this.showNum=this.episodes.length
        },
        setNum(){
            if(this.showNum < this.episodes.length){
                this.showNum = this.showNum + 1
                window.requestAnimationFrame(this.setNum)
            }
            
            
        },
       
        getepiList(id) {
            epiList({
                id,
            }).then(res => {
                console.log(121,res)
                // this.episodes = res.data.episodes;
                // if (this.episodes.length) {
                //     this.curent = this.curent > this.episodes.length ? 0 : this.curent;
                //     this.videoOptions.video.url = this.episodes[this.curent].play_url;
                //     this.videoOptions.video.pic = this.episodes[this.curent].cover;
                //     console.log(127, this.$refs)
                //     this.$nextTick(() => {
                //         this.player = this.$refs.player.dp;
                //     });
                // }
                // if (typeof res.data.playlet == 'object' && res.data.playlet != null) {
                //     this.playlet = res.data.playlet;
                // }
               
                if (typeof res == 'object' && res != null) {
                    if (typeof res.data == 'object' && res.data != null) {
                        if (Array.isArray(res.data.episodes)) {
                            this.episodes = res.data.episodes;
                            if (this.episodes.length) {
                                this.curent = this.curent > this.episodes.length ? 0 : this.curent;
                                this.videoOptions.video.url = this.episodes[this.curent].play_url;
                                this.videoOptions.video.pic = this.episodes[this.curent].cover;
                                this.$nextTick(() => {
                                    this.player = this.$refs.player.dp;
                                });
                            }
                        }
                        if (typeof res.data.playlet == 'object' && res.data.playlet != null) {
                            this.playlet = res.data.playlet;
                        }
                    }
                }
            });
        },
        clickVideo(item, index) {
            this.curent = index;
            console.log(167, this.player);
            this.player = this.player ? this.$refs.player.dp : this.player;
            this.player.switchVideo({
                url: item.play_url,
                pic: item.cover,
            });
            this.player.play();
        },
    },
};
</script>

<style lang="scss" scoped>
.play-box {
    align-content: flex-start;
    // overflow: auto;

    .play-item {
        border: 1px solid #a1a1a1;
        color: #a1a1a1;
        margin-right: 15px;
        cursor: pointer;
        border-radius: 5px;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 38px;
        margin-bottom: 15px;
        display: flex;
        font-size: 15px;
    }

    .active-item {
        
        // border: 1px solid #007dff;
        // background-color: #007dff;
        background-color: #00cc4c;
        background-image: linear-gradient(90deg,#00cc4c,#07a365);
        border-color: #00cc4c;
        color: #fff;
    }
}
.playerMain{
    width: 100vw;
    height: calc( 100vh - 50px);
}
::-webkit-scrollbar-thumb{
    background-color: #007dff !important;
    border-radius: 10px !important;
    width: 6px !important;   
    
}

::-webkit-scrollbar {
  width: 4px;
}


 ::-moz-scrollbar {
  width: 10px;
} 


::-webkit-scrollbar-thumb {
  background-color: #888;
}

.relative{
    position: relative;
}
.centers{
    display: flex;
    align-items: center;
    justify-content: center;
}
.diy_tip{
    position: absolute;
    top: 1rem;
    font-size: 1.3rem;
    font-family: cursive;
    color: cornflowerblue;
}

</style>
